<script lang="ts" setup>
import { QForm, QTable, type FormItemRows, type TableColums } from '@meetjs/element-plus-kit'
import { delInterfaceInfo, getData, getInterfaceList } from '@/api/interface/list/index'
import { getDicts } from '@/api/system/dict/index'
import { warnBox } from '@/utils/utils'
import EditDialog from './components/EditDialog.vue'
import type { ListType } from '@/api/interface/list/type.ts'
import type { IGetDictsRes } from '@/api/system/dict/type'

// form
const formValue = ref({
	name: ''
})
const formOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '接口名称',
		prop: 'name'
	}
])

// table
const loading = ref(false)
const page = ref({
	currentPage: 1,
	pageSize: 10,
	total: 0
})
const tableData = ref<ListType[]>([])
const columns = ref<TableColums[]>([
	{
		type: 'index',
		label: '序号',
		align: 'center',
		width: 60
	},
	{
		label: '接口名称',
		prop: 'name'
	},
	{
		label: '接口路径',
		prop: 'path'
	},
	{
		label: '请求方式',
		prop: 'requestMethod',
		formatter: (row: ListType) => {
			return methods.value.find(item => item.value === Number(row.requestMethod))?.label ?? ''
		}
	},
	{
		label: '联系人',
		prop: 'providerName'
	},
	{
		label: '联系电话',
		prop: 'contactPhone'
	},
	{
		label: '联系邮箱',
		prop: 'contactEmail'
	},
	{
		label: '创建时间',
		prop: 'createTime',
		align: 'center'
	},
	{
		prop: 'action',
		fixed: 'right',
		label: '操作',
		width: 140,
		align: 'center'
	}
])

// dialog
const editDialogRef = useTemplateRef('editDialogRef')

const getTableData = async () => {
	try {
		loading.value = true
		const res = await getInterfaceList({
			pageNum: page.value.currentPage,
			pageSize: page.value.pageSize,
			...formValue.value
		})
		tableData.value = res.data.rows
		page.value.total = res.data.total
	} finally {
		loading.value = false
	}
}

const handelAdd = () => {
	editDialogRef.value?.init('add')
}

const handelEdit = (row: ListType) => {
	editDialogRef.value?.init('edit', row)
}

const handelDelete = async (rowId: string) => {
	await warnBox()
	await delInterfaceInfo(rowId)
	ElMessage.success('删除成功')
	getTableData()
}

const methods = ref<IGetDictsRes>([])
const provides = ref<{ label: string; value: string }[]>([])
const init = async () => {
	getDicts('sys_interface_request_method').then(res => {
		methods.value = res
	})
	getData().then(data => {
		provides.value = data.data.rows.map(item => {
			return {
				label: item.businessSystemName,
				value: item.id
			}
		})
	})
}

onMounted(() => {
	init()
	getTableData()
})
</script>

<template>
	<div class="table-page-box">
		<div class="filter-box">
			<QForm
				inline
				:model="formValue"
				:form-options="formOptions"
				:buttons="['search', 'reset']"
				@search="getTableData"
				@reset="getTableData"
			/>
		</div>
		<div class="table-box">
			<QTable
				:data="tableData"
				:columns="columns"
				:page="page"
				:loading="loading"
				style="width: 100%"
				@pageChange="getTableData"
			>
				<template #headerLeft>
					<el-button
						type="primary"
						@click="handelAdd"
					>
						新增
					</el-button>
				</template>
				<template #action="{ row }">
					<el-button
						type="primary"
						link
						@click="handelEdit(row)"
					>
						修改
					</el-button>
					<el-button
						type="danger"
						link
						@click="handelDelete(row.id)"
					>
						删除
					</el-button>
				</template>
			</QTable>
		</div>
		<EditDialog
			ref="editDialogRef"
			:methods="methods"
			:provides="provides"
			@refresh="getTableData"
		/>
	</div>
</template>
